<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热力图</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="css/myCSS.css">
    <script type="text/javascript">
        var flag = false;
    </script>
</head>
<body>

<div style="float: left;width: 10%">
    <a href="http://120.27.237.68:8080/web/location.html">定位界面1</a><br/>
    <a href="http://120.27.237.68:8080/web/location2.html">定位界面2</a><br/>
    <a href="http://120.27.237.68:8080/web/TD2.html">热力图1</a><br/>
</div>

<div style="float: right;width: 90%">

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" class="locationCss2"></div>

    <script type="text/javascript">
        // 刷新间隔
        var intervalTime = 100;
        // 单位长度
        var length = 1;
        // 横轴长度
        var width = [1,2,3,4,5,6,7,8,9,10,11];
        // 纵轴长度
        var height = [1,2,3,4,5,6,7,8,9];

        $.ajaxSettings.async = false;

        var myChart = echarts.init(document.getElementById('main'));


        option = {
            tooltip: {
                position: 'top'
            },
            grid: {
                height: '50%',
                top: '10%'
            },
            xAxis: {
                type: 'category',
                data: width,
                splitArea: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: height,
                splitArea: {
                    show: true
                }
            },
            visualMap: {
                min: 0,
                max: 10,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
            },
            series: [{
                name: '定位热力图',
                type: 'heatmap',
                label: {
                    show: true
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

         myChart.setOption(option);

        var value = [];
        var flag = true;
        var X = [];
        var Y = [];
        var frequency = [];
        //ajax请求
        $.ajax({
            type: "get",
            async: false,
            url: "getxy",
            data: {
                status: "PLACE2"
            },
            dataType: "json",
            success: function (data) {

                for (var i = 0; i < data.length; i++) {
                    flag = true;
                    for (var i1 = 0;i1 < X.length;i1++){
                        if (Math.ceil(data[i].x)  == X[i1] && Math.ceil(data[i].y)  == Y[i1]){
                            frequency[i1]+=1;
                            flag = false;
                            break;
                        }
                    }
                   if(flag){
                       X.push(Math.ceil(data[i].x));
                       Y.push(Math.ceil(data[i].y));
                       frequency.push(0);
                   }

                }

                for (var i = 0;i<X.length;i++){
                    value.push([X[i],Y[i],frequency[i]]);
                }

                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({
                    series: [{
                        // 根据名字对应到相应的数据s
                        data: value
                    }]
                });

            },
            error: function () {

            }
        });
    </script>


</div>


</body>
</html>
